.calculatorPage {
  width: 750px;
  min-height: 100vh;
  background-color: #f5f5f5;
  @apply box-border relative;
}
.bgWrapper {
  width: 750px;
  height: 100%;
  z-index: 2;
  @apply absolute box-border left-0 top-0 right-0;
  .bgBannerBox {
    width: 100%;
    height: 400px;
    @apply box-border;
    .bgBanner {
      width: 750px;
      height: 400px;
      @apply box-border;
    }
  }
  .bgGradiantBox {
    width: 100%;
    height: 402px;
    @apply box-border;
    .bgGradiant {
      width: 750px;
      height: 402px;
      @apply box-border;
    }
  }
}
.pageContent {
  width: 750px;
  padding-top: 330px;
  padding-bottom: 162px;
  z-index: 3;
  @apply relative left-0 top-0 right-0 box-border;
}
.contentCard {
  width: 686px;
  border-radius: 32px;
  background: #fff;
  margin-bottom: 32px;
  box-shadow: 0 0 32px 0 #00000029;
  @apply box-border mx-auto;
}
.contentCard.calculator {
  .filterTabs {
    border-bottom: 1px solid #dddddd;
    @apply box-border flex flex-row box-border justify-between;
    .filterTab {
      height: 98px;
      flex: 1;
      @apply relative flex flex-col justify-center items-center box-border;
      .filterTabText {
        color: #999999;
        font-family: "PingFang SC";
        font-size: 28px;
        font-weight: 400;
        @apply text-center font-normal box-border;
      }
      .filterTabLine {
        width: 40px;
        height: 6px;
        border-radius: 4px;
        background: transparent;
        margin-top: 24px;
        @apply box-border absolute bottom-0;
      }
      &.activeTab {
        .filterTabText {
          color: #3775f6;
          @apply font-bold;
        }
        .filterTabLine {
          background: #3775f6;
        }
      }
    }
  }
  .filterForm {
    padding-top: 32px;
    padding-bottom: 64px;
    @apply box-border;
    .filterFormControl {
      width: 622px;
      height: 88px;
      border-radius: 16px;
      margin-top: 32px;
      border: 1px solid #ddd;
      @apply box-border flex flex-row items-center mx-auto;
      .filterFormControlLabel {
        color: #333333;
        font-family: "PingFang SC";
        font-size: 28px;
        width: 204px;
        @apply text-center font-normal box-border;
      }
      .filterFormControlValue {
        @apply flex-1 box-border;
      }
      .filterFormControlInput {
        color: #333333;
        font-family: "PingFang SC";
        font-size: 28px;
        padding-right: 28px;
        @apply font-normal text-right;
      }
      .filterFormControlPlaceholder {
        color: #bbbbbb;
        font-family: "PingFang SC";
        font-size: 28px;
        @apply font-normal text-right;
        &.antiFilterFormControlPlaceholder {
          color: #333333 !important;
        }
      }
      .filterFormControlIcon {
        color: #bbbbbb;
        margin-left: 24px;
        margin-right: 28px;
      }
    }
    .actionBtn {
      width: 520px;
      height: 92px;
      border-radius: 100px;
      @apply box-border justify-center flex flex-row items-center mx-auto;
    }
    .actionBtnText {
      font-family: "Source Han Sans CN";
      font-size: 32px;
      margin-left: 6px;
      @apply font-bold;
    }
    .confirmIcon {
      width: 40px;
      height: 40px;
      @apply box-border;
    }
    .confirmBtn {
      margin-top: 64px;
      background: linear-gradient(90deg, #252dfc 0.02%, #3889ff 98.61%);
      .confirmText {
        color: #ffffff;
      }
    }
    .shareBtn {
      margin-top: 32px;
      border: 2px solid #1a8cff !important;
      background-color: transparent;
      .shareIcon {
        transform: translate(0, 8px);
      }
      .shareText {
        color: #1a8cff;
      }
    }
  }
  .noCalcData {
    padding-top: 32px;
    padding-bottom: 64px;
    @apply box-border flex flex-col items-center;
    .noCalcDataImg {
      width: 256px;
      height: 256px;
      @apply box-border block;
    }
    .noCalcDataTitle {
      color: #666666;
      font-family: "Source Han Sans CN";
      font-size: 28px;
      margin-top: 32px;
      @apply font-normal;
    }
    .noCalcDataDesc {
      color: #999999;
      font-family: "Source Han Sans CN";
      font-size: 28px;
      margin-top: 16px;
      @apply font-normal;
    }
    .noCalcDataBtn {
      width: 520px;
      height: 92px;
      border-radius: 100px;
      margin-top: 64px;
      background: linear-gradient(90deg, #252ffc 0%, #3582fc 100%);
      @apply box-border flex flex-row justify-center items-center;
      .noCalcDataBtnIcon {
        width: 40px;
        height: 40px;
        @apply box-border block;
      }
      .noCalcDataBtnText {
        color: #ffffff;
        font-family: "Source Han Sans CN";
        font-size: 32px;
        @apply font-bold;
      }
    }
  }
}
.contentCard.rules {
  .ruleHeader {
    padding: 48px 36px;
    @apply box-border flex flex-row items-center;
    .ruleTitle {
      margin-left: 12px;
      color: #333333;
      font-family: "PingFang SC";
      font-size: 32px;
      @apply font-bold box-border;
    }
  }
  .rulesList {
    width: 622px;
    @apply box-border mx-auto;
    .rulesListItem {
      margin-bottom: 48px;
      .rulesProf {
        color: #333333;
        font-family: "PingFang SC";
        font-size: 28px;
        @apply font-normal;
      }
      .rulesDetail {
        border-radius: 16px;
        background: #f5f5f5;
        padding: 32px 34px;
        margin-top: 24px;
        @apply box-border;
      }
      .rulesDetialTop {
        @apply box-border flex flex-row items-center;
        .rulesDetailTopText {
          margin-left: 6px;
          color: #999999;
          font-family: "PingFang SC";
          font-size: 28px;
          font-weight: 500;
        }
      }
      .rulesCalculation {
        margin-top: 16px;
        font-family: "PingFang SC";
        font-size: 28px;
        color: #333333;
        word-wrap: break-word;
        @apply break-words break-all text-justify;
        .highLight {
          color: #3775f6;
        }
      }
    }
  }
  .rulesOrigin {
    color: #999999;
    font-family: "PingFang SC";
    font-size: 24px;
    padding-top: 0;
    padding-bottom: 48px;
    @apply font-normal text-center;
  }
}
.contentCard.jumpNavs {
  @apply overflow-hidden box-border;
}
.popupContent {
  @apply box-border h-full overflow-auto relative;
  .districtTitle {
    color: #333333;
    font-size: 32px;
    padding-top: 32px;
    padding-bottom: 32px;
    @apply text-center box-border;
  }
  .districtList {
    padding-left: 32px;
    padding-right: 32px;
    @apply box-border;
    .districtListContainer {
      transform: translateX(24px);
    }
    .districtListItem {
      font-size: 28px;
      color: #333333;
      border-radius: 8px;
      width: 108px;
      height: 60px;
      border: 1px solid #bbbbbb;
      @apply font-normal cursor-pointer box-border flex flex-row justify-center items-center;
      &.disabled {
        background-color: #999999;
        @apply cursor-not-allowed;
      }
      &.selected {
        background-color: #3775f6;
        border-color: #3775f6;
        color: #ffffff;
      }
    }
  }
}
.scoreWrapper {
  @apply flex items-center justify-center h-full box-border;
  .scoreMain {
    width: 640px;
    @apply flex flex-col items-center justify-center box-border;
  }
  .scoreClose {
    @apply box-border flex flex-row justify-end ml-auto cursor-pointer;
  }
  .scoreImageWrapper {
    width: 640px;
    height: 282px;
    @apply box-border relative flex flex-col justify-center items-center;
    .scoreImage {
      width: 640px;
      height: 282px;
      @apply box-border absolute left-0 top-0 z-10;
    }
    .scoreText {
      color: #ffffff;
      font-family: "PingFang SC";
      font-size: 32px;
      @apply font-bold box-border relative z-20;
    }
    .scoreShow {
      margin-top: 18px;
      @apply box-border relative z-20 flex flex-row items-end justify-center;
      .scoreNum {
        color: #ffffff;
        font-family: "PingFang SC";
        font-size: 80px;
        line-height: 1;
        @apply font-extrabold;
      }
      .scoreUnit {
        color: #ffffff;
        font-family: "PingFang SC";
        font-size: 28px;
        @apply font-bold;
      }
    }
  }
  .scoreDetail {
    width: 600px;
    transform: translateY(-24px);
    background-color: #ffffff;
    padding-top: 24px;
    padding-bottom: 70px;
    border-radius: 0 0 32px 32px;
    @apply box-border flex flex-col items-center;
    .scoreDetailItem {
      color: #333333;
      font-family: "PingFang SC";
      font-size: 28px;
      margin-bottom: 16px;
      @apply box-border w-full font-normal flex flex-row items-center;
      .scoreDetailLabel,
      .scoreDetailValue {
        flex: 1;
        @apply box-border flex;
      }
      .scoreDetailLabel {
        @apply justify-end;
      }
      .scoreDetailValue {
        margin-left: 16px;
        @apply justify-start;
      }
    }
    .scoreBtn {
      width: 480px;
      height: 88px;
      border-radius: 100px;
      @apply box-border flex flex-row justify-center items-center cursor-pointer;
      &.recalcBtn {
        margin-top: 48px;
        background: linear-gradient(90deg, #252ffc 0%, #3684fd 100%);
      }
      &.contactBtn {
        margin-top: 32px;
        background: linear-gradient(90deg, #fb4f2f 0%, #ff7d26 100%);
      }
      .btnIcon {
        width: 40px;
        height: 40px;
        @apply box-border block;
      }
      .btnText {
        color: #ffffff;
        font-family: "Source Han Sans CN";
        font-size: 32px;
        margin-left: 6px;
        @apply font-bold;
      }
    }
  }
}
.navBarLeftExtra {
  @apply box-border flex flex-row items-center;
  .navBarLeftExtraText {
    color: #333333;
    font-family: "PingFang SC";
    font-size: 28px;
    margin-left: 12px;
    @apply box-border font-normal;
  }
}
.contactWrapper {
  @apply flex items-center justify-center h-full box-border;
  .contactMain {
    width: 600px;
    @apply flex flex-col items-center justify-center box-border;
  }
  .contactClose {
    margin-bottom: 64px;
    @apply box-border flex flex-row justify-end ml-auto cursor-pointer;
  }
  .contactDetail {
    width: 600px;
    background-color: #ffffff;
    padding: 100px 32px;
    border-radius: 64px 64px 32px 32px;
    @apply box-border flex flex-col items-center;
    .contactQRCode {
      width: 400px;
      height: 400px;
      margin-bottom: 56px;
      @apply box-border block;
    }
    .contactDesc {
      color: #333333;
      font-size: 28px;
      @apply font-normal;
    }
  }
}
.entry {
  width: 164px;
  height: 150px;
  bottom: 238px;
  left: 8px;
  transition: all 0.5s ease;
  z-index: 999;
  @apply fixed;
}
.entry_image {
  width: 100%;
  height: 100%;
}
